<template>
	<view class="main">
		<u-navbar :is-back="false" :title="i18n.navbar.commodity" :background="background" :border-bottom="false"
			title-color="#000000" back-icon-color="#000">
			<view class="navright" slot="right">
				<image src="../../../static/images/sx.png" mode="" @click="showscreen"></image>
			</view>
		</u-navbar>
		<view class="all">
			<scroll-view scroll-x="true">
				<view class="tabs">
					<u-tabs :list="i18n.commodity.list" :is-scroll="true" :current="current" @change="change"
						active-color="#FF0000">
					</u-tabs>

					<!-- 	<view class="tab" v-for="item in 20">
						<text>出售中(2)</text>
						<view class="xian"></view>
					</view> -->

				</view>
			</scroll-view>
			<view class="storehouse" v-if="current==0">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>{{item.source}}</text>
						<!-- <text>排序：100</text> -->
						<text>{{i18n.commodity.For_sale.sales}}：{{item.sales}}</text>
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'在售中':'已下架'}}</text>
									<text class="instock">{{i18n.commodity.For_sale.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<!-- 		<view class="put" @click="show(1,item.id)">
								{{i18n.commodity.button.on_shelf}}
							</view> -->
							<view class="off" @click="show(2,item.id)">
								{{i18n.commodity.button.take_down}}
							</view>

							<view class="joindel" @click="show(0,item.id)">
								{{i18n.commodity.button.add_Bin}}
							</view>
							<view class="details" @click="router('../details/details',item.id)">
								{{i18n.commodity.button.details}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="storehouse" v-if="current==1">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>{{item.source}}</text>
						<!-- <text>排序：100</text> -->
						<text>{{i18n.commodity.For_sale.sales}}：{{item.sales}}</text>
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'在售中':'已下架'}}</text>
									<text class="instock">{{i18n.commodity.For_sale.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<view class="join_del" @click="show(0,item.id)">
								{{i18n.commodity.button.join_bin}}
							</view>
							<view class="put" @click="show(1,item.id)">
								{{i18n.commodity.button.on_shelf}}
							</view>
							<view class="details" @click="router('../edit/edit',item.id)">
								{{i18n.commodity.button.details}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="shoplist.length<1" text="暂无数据" mode="list"></u-empty>
			</view>
			<view class="storehouse" v-if="current==2">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>{{item.source}}</text>
						<!-- <text>排序：100</text> -->
						<text>{{i18n.commodity.For_sale.sales}}：{{item.sales}}</text>
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'在售中':'已下架'}}</text>
									<text class="instock">{{i18n.commodity.For_sale.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<view class="join_del" @click="show(0,item.id)">
								{{i18n.commodity.button.join_bin}}
							</view>

							<view class="details" @click="router('../edit/edit',item.id)">
								{{i18n.commodity.button.details}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="shoplist.length<1" text="暂无数据" mode="list"></u-empty>
			</view>
			<view class="storehouse" v-if="current==3">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>{{item.source}}</text>
						<!-- <text>排序：100</text> -->
						<text>{{i18n.commodity.For_sale.sales}}：{{item.sales}}</text>
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'在售中':'已下架'}}</text>
									<text class="instock">{{i18n.commodity.For_sale.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<view class="join_del" @click="show(0,item.id)">
								{{i18n.commodity.button.join_bin}}
							</view>

							<view class="details" @click="router('../edit/edit',item.id)">
								{{i18n.commodity.button.details}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="shoplist.length<1" text="暂无数据" mode="list"></u-empty>
			</view>

			<view class="storehouse" v-if="current==4">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>{{item.source}}</text>
						<!-- <text>排序：100</text> -->
						<text>{{i18n.commodity.For_sale.sales}}：{{item.sales}}</text>
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'在售中':'已下架'}}</text>
									<text class="instock">{{i18n.commodity.For_sale.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<view class="recovery" @click="show(3,item.id)">
								{{i18n.commodity.button.recover}}
							</view>
							<view class="delete">
								{{i18n.commodity.button.remove}}
							</view>
							<view class="details" @click="router('../edit/edit',item.id)">
								{{i18n.commodity.button.details}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="shoplist.length<1" text="暂无数据" mode="list"></u-empty>
			</view>
			<view class="storehouse" v-if="current==5">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>{{item.source}}</text>
						<!-- <text>排序：100</text> -->
						<text>{{i18n.commodity.For_sale.sales}}：{{item.sales}}</text>
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'在售中':'已下架'}}</text>
									<text class="instock">{{i18n.commodity.For_sale.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<view class="join_del" @click="show(0,item.id)">
								{{i18n.commodity.button.join_bin}}
							</view>

							<view class="details" @click="router('../details/details',item.id)">
								{{i18n.commodity.button.details}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="shoplist.length<1" text="暂无数据" mode="list"></u-empty>
			</view>
			<view class="storehouse" v-if="current==6">
				<view class="allhouse" v-for="(item,index) in shoplist" :key="index">
					<view class="housetop">
						<text>{{item.source}}</text>
						<!-- <text>排序：100</text> -->
						<text>{{i18n.commodity.For_sale.sales}}：{{item.sales}}</text>
					</view>
					<view class="shop">
						<view class="shop_top">
							<view class="shop_l">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="shop_r">
								<text class="title">{{item.storeName}}</text>
								<view class="styles">
									<text class="status">{{item.isShow==1?'在售中':'已下架'}}</text>
									<text class="instock">{{i18n.commodity.For_sale.in_stock}}：{{item.stock}}</text>
								</view>
								<text class="money">¥{{item.price}}</text>
							</view>
						</view>
						<view class="shop_bottom">
							<view class="join_del" @click="show(0,item.id)">
								{{i18n.commodity.button.join_bin}}
							</view>

							<view class="details" @click="router('../edit/edit',item.id)">
								{{i18n.commodity.button.details}}
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="shoplist.length<1" text="暂无数据" mode="list"></u-empty>
			</view>
			
		</view>

		<u-popup v-model="del" mode="center" width="600" height="380" border-radius="20">
			<view class="mdtitle">
				{{i18n.commodity.commodity_details.tips}}
			</view>
			<text class="wb">{{txt}}</text>
			<view class="mdbuts">
				<view class="but_l" @click="confirm">
					确定
				</view>
				<view class="but_r" @click="no">
					取消
				</view>
			</view>
		</u-popup>
		<u-popup v-model="screen" width="570" mode="right">
			<view class="showright">
				<view class="scree_tit">
					{{i18n.commodity.filter.Filter_tit}}
				</view>
				<view class="smtit">
					{{i18n.commodity.filter.PCategories}}
				</view>
				<view class="selects" @click="showselect(0)">
					<text>{{pctype==''?i18n.commodity.filter.please_choose:pctype}}</text>
					<image src="../../../static/images/right.png" mode="aspectFit"></image>
				</view>
				<view class="smtit">
					{{i18n.commodity.filter.MerchantCategories}}
				</view>
				<view class="selects" @click="showselect(1)">
					<text> {{shoptypename==''?i18n.commodity.filter.please_choose:shoptypename}}</text>
					<image src="../../../static/images/right.png" mode="aspectFit"></image>
				</view>
				<view class="smtit">
					{{i18n.commodity.filter.product_search}}
				</view>
				<view class="selects">
					<input type="text" :placeholder="i18n.commodity.filter.placeholder" v-model="keywords" />
				</view>

				<view class="rightbut">
					<view class="rightconfim" @click="rest">
						{{i18n.commodity.filter.reset}}
					</view>
					<view class="rightoff" @click="confirmlist">
						{{i18n.commodity.filter.confirm}}
					</view>
				</view>
			</view>
		</u-popup>
		<u-select v-model="shoptype" mode="mutil-column-auto" :list="treelist" value-name="id" label-name="name"
			child-name="childList" @confirm="confirm2"></u-select>
		<u-select v-model="shoptype2" mode="single-column" :list="shoptypelist" value-name="id" label-name="name"
			child-name="childList" @confirm="confirm2"></u-select>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},

				current: 0,
				del: false,
				screen: false,
				txt: '',
				condition: '',
				shoplist: [],
				shopid: '',
				tabid: '',
				tabnum: 0,
				shoptype: false,
				shoptype2: false,
				treelist: [],
				pctype: '',
				shoptypelist: [],
				typeid: '',
				shoptypename: '',
				cateId: '',
				categoryId: '',
				keywords: '',
			}
		},
		onLoad() {
			this.getlist(this.current)
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang()
			this.gettabnum()
			this.getbrandtype()
			this.getshoptype()
		},
		methods: {
			//重置
			rest() {
				this.getlist(this.current)
				this.gettabnum()
				this.pctype=''
				this.shoptypename=''
				// this.getlist(this.tabid + 1)
				this.cateId = ''
				this.categoryId = ''
				this.keywords = ''
				
			},
			//确定
			confirmlist() {
				this.gettabnum()
				global.$http.request({
					url: '/api/admin/merchant/product/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						type: this.tabid + 1,
						cateId: this.cateId,
						categoryId: this.categoryId,
						keywords: this.keywords,
						
					}

				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data.list);
						this.shoplist = res.data.data.list
					}
				})
			},
			//根据穿的值弹出层
			showselect(index) {
				this.typeid = index
				if (index == 0) {
					this.shoptype = true
				} else if (index == 1) {
					this.shoptype2 = true
				} else if (index == 2) {

				}
			},
			confirm2(e) {
				if (this.typeid == 0) {
					this.pctype = e[2].label
				this.categoryId = e[2].value
				} else if (this.typeid == 1) {
					this.shoptypename = e[0].label
					
						this.cateId = e[0].value
				}
			},
			//获取商户分类
			getshoptype() {
				global.$http.request({
					url: '/api/admin/merchant/store/product/category/cache/tree',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {}
				}).then(res => {
					if (res.data.code == 200) {
						this.shoptypelist = res.data.data
					}
				})
			},
			//获取平台商品分类
			getbrandtype() {
				global.$http.request({
					url: '/api/admin/merchant/product/category/cache/tree',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						this.treelist = res.data.data

						// console.log('商户分类', res.data.data);
						var that = this
						for (let i = 0; i < res.data.data.length; i++) {
							for (let j = 0; j < res.data.data[i].childList.length; j++) {
								for (let k = 0; k < res.data.data[i].childList[j].childList.length; k++) {
										// this.pctype = res.data.data[i].childList[j].childList[k].name
										// console.log(res.data.data[i].childList[j].childList[k].id);
								}
							}
						}
					}
				})
			},
			//获取商品列表
			getlist(index) {
				console.log(index);
				this.tabid = index
				global.$http.request({
					url: '/api/admin/merchant/product/list',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data: {
						type: index + 1
					}

				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data.list);
						this.shoplist = res.data.data.list
					}
				})
			},
			// /api/admin/merchant/product/tabs/headers
			//获取表头数据
			gettabnum() {
				global.$http.request({
					url: '/api/admin/merchant/product/tabs/headers',
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						this.tabnum = this.tabnum + 1
						if (this.tabnum == 1) {
							this.i18n.commodity.list[0].name = this.i18n.commodity.list[0].name +
								`(${res.data.data[0].count})`
							this.i18n.commodity.list[1].name = this.i18n.commodity.list[1].name +
								`(${res.data.data[1].count})`
							this.i18n.commodity.list[2].name = this.i18n.commodity.list[2].name +
								`(${res.data.data[2].count})`
							this.i18n.commodity.list[3].name = this.i18n.commodity.list[3].name +
								`(${res.data.data[3].count})`
							this.i18n.commodity.list[4].name = this.i18n.commodity.list[4].name +
								`(${res.data.data[4].count})`
							this.i18n.commodity.list[5].name = this.i18n.commodity.list[5].name +
								`(${res.data.data[5].count})`
							this.i18n.commodity.list[6].name = this.i18n.commodity.list[6].name +
								`(${res.data.data[6].count})`
						} else {
							this.i18n.commodity.list[0].name = '出售中' +
								`(${res.data.data[0].count})`
							this.i18n.commodity.list[1].name = '仓库中' +
								`(${res.data.data[1].count})`
							this.i18n.commodity.list[2].name = '已售空' +
								`(${res.data.data[2].count})`
							this.i18n.commodity.list[3].name = '警戒库存' +
								`(${res.data.data[3].count})`
							this.i18n.commodity.list[4].name = '回收站' +
								`(${res.data.data[4].count})`
							this.i18n.commodity.list[5].name = '待审核' +
								`(${res.data.data[5].count})`
							this.i18n.commodity.list[6].name = '审核失败' +
								`(${res.data.data[6].count})`
						}

					}
				})
			},

			//加入回收站
			join_del() {
				global.$http.request({
					url: '/api/admin/merchant/product/delete/' + this.shopid,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data);
						console.log(res.data.data);
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						})
						var that = this
						setTimeout(function() {
							that.getlist(that.tabid)
							that.gettabnum()
						}, 1000)
					}
				})
			},
			//恢复商品
			recovery() {
				global.$http.request({
					url: '/api/admin/merchant/product/restore/' + this.shopid,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data);
						console.log(res.data.data);
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						})
						var that = this
						setTimeout(function() {
							that.getlist(that.tabid)
							that.gettabnum()
						}, 1000)
					}
				})
			},

			// 


			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			change(index) {

				this.current = index;
				this.getlist(this.current)
				// this.list[0].name=`出售中(${2})`//用于循环
			},
			showscreen() {
				this.screen = true
			},
			no() {
				this.del = false
			},
			show(index, id) {
				this.del = true
				this.condition = index
				this.shopid = id
				if (index == 0) {
					this.txt = this.i18n.commodity.commodity_details.txt
				} else if (index == 1) {
					this.txt = this.i18n.commodity.commodity_details.txt1
				} else if (index == 2) {
					this.txt = this.i18n.commodity.commodity_details.txt2
				} else if (index == 3) {
					this.txt = this.i18n.commodity.commodity_details.txt3
				}
			},
			//上架商品
			onshelf() {
				global.$http.request({
					url: '/api/admin/merchant/product/putOnShell/' + this.shopid,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data);
						console.log(res.data.data);
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						})
						var that = this
						setTimeout(function() {
							that.getlist(that.tabid)
							that.gettabnum()
						}, 1000)
					}
				})
			},
			//弹框确定
			confirm() {
				this.del = false
				// this.i18n.commodity.list[0].name = ''
				// this.i18n.commodity.list[1].name = ''
				// this.i18n.commodity.list[2].name = ''
				// this.i18n.commodity.list[3].name = ''
				// this.i18n.commodity.list[4].name = ''
				// this.i18n.commodity.list[5].name = ''
				// console.log(this.i18n.commodity.list[0].name);
				// this.gettabnum()
				if (this.condition == 0) {
					//回收站方法
					this.join_del()
				} else if (this.condition == 1) {
					//上架
					this.onshelf()
				} else if (this.condition == 2) {
					//下架
					this.off()

				} else if (this.condition == 3) {
					//恢复商品
					this.recovery()
				}
			},


			//下架商品
			// /api/admin/merchant/product/offShell/{id}
			off() {
				global.$http.request({
					url: '/api/admin/merchant/product/offShell/' + this.shopid,
					method: 'GET',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data);
						console.log(res.data.data);
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						})
						var that = this
						setTimeout(function() {
							that.getlist(that.tabid)
							that.gettabnum()
						}, 1000)
					}
				})
			},
			//跳转路由
			router(path, id) {
				uni.navigateTo({
					url: path + '?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;

			.navright {
				padding-right: 30rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.all {
				.tabs {
					display: flex;
					background-color: #fff;
					height: 88rpx;

					.tab {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.xian {
							width: 40rpx;
							height: 4rpx;
							background: #FF0000;
						}
					}
				}

				.storehouse {
					margin-top: 11rpx;

					.allhouse {
						background-color: #fff;

						.housetop {
							display: flex;
							justify-content: space-between;
							width: 750rpx;
							background: #666666;
							padding: 22rpx 43rpx 22rpx 26rpx;



							text {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
							}
						}

						.shop {


							.shop_top {
								padding: 18rpx 42rpx 41rpx 25rpx;
								width: 750rpx;
								display: flex;
								border-bottom: 2rpx solid #f7f7f7;
								// padding-bottom: 34rpx;

								.shop_l {
									image {
										width: 180rpx;
										height: 180rpx;
									}
								}

								.shop_r {
									width: 500rpx;
									padding-left: 25rpx;

									.title {
										width: 100%;
										font-size: 28rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #000000;
										overflow: hidden;

										text-overflow: ellipsis;

										display: -webkit-box;

										-webkit-box-orient: vertical;

										-webkit-line-clamp: 2; //行数

									}

									.styles {
										display: flex;
										justify-content: space-between;
										align-items: center;
										padding: 25rpx 0 21rpx 0;

										.status {
											font-size: 24rpx;
											font-family: PingFang SC;
											font-weight: 400;
											color: #FF0707;

										}

										.instock {
											font-size: 24rpx;
											font-family: PingFang SC;
											font-weight: 400;
											color: #616161;
										}
									}

									.money {
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: #010101;
									}
								}
							}

							.shop_bottom {
								padding: 16rpx 0 20rpx 0;
								display: flex;
								justify-content: space-between;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								margin: 0 50rpx 0 25rpx;
								line-height: 48rpx;
								text-align: center;


								.join_del {
									width: 320rpx;
									height: 48rpx;
									text-align: center;
									background: #304156;
									border-radius: 24rpx;
									color: #FFFFFF;
								}

								.details {
									padding: 0 36rpx;
									height: 48rpx;
									background: #0F82FF;
									border-radius: 24rpx;
									color: #FFFFFF;
								}


								.recovery {
									width: 120rpx;
									height: 48rpx;
									background: #304156;
									border-radius: 24rpx;
									color: #FFFFFF;
								}

								.delete {
									width: 120rpx;
									height: 48rpx;
									background: #FFFFFF;
									border: 1rpx solid #B3B3B3;
									border-radius: 24rpx;
									text-align: center;
								}

								.put {
									padding: 0 36rpx;
									height: 48rpx;
									background: #FFFFFF;
									border: 1rpx solid #B3B3B3;
									border-radius: 24rpx;
								}

								.off {
									padding: 0 36rpx;
									height: 48rpx;
									background: #0F82FF;
									border-radius: 24rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
								}

								.joindel {
									padding: 0 36rpx;
									height: 48rpx;
									background: #304156;
									border-radius: 24rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #FFFFFF;
								}
							}
						}
					}
				}
			}

			.mdtitle {
				padding-top: 52rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				text-align: center;
			}

			.wb {
				display: block;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				padding: 40rpx 0 59rpx 0;
			}

			.mdbuts {
				line-height: 64rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: space-around;
				padding: 0 90rpx;

				.but_l {
					width: 160rpx;
					height: 64rpx;
					background: #304156;
					border-radius: 32rpx;
				}

				.but_r {
					width: 160rpx;
					height: 64rpx;
					background: #B3B3B3;
					border-radius: 32rpx;
				}
			}

			.showright {
				padding-left: 14rpx;

				.scree_tit {
					padding: 78rpx 0 64rpx 0;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.smtit {
					padding-bottom: 23rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.selects {
					padding: 30rpx 10rpx;
					margin: 0 15rpx 65rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #F0F0F0;
					border-radius: 10rpx;

					text {

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #B3B3B3;
					}

					input {
						// background: #F0F0F0;
						// border-radius: 10rpx;
					}

					image {
						width: 10rpx;
						height: 16rpx;
					}
				}

				.rightbut {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 34rpx;
					font-family: PingFang SC;
					line-height: 92rpx;
					text-align: center;
					padding: 0 25rpx;

					.rightconfim {
						width: 240rpx;
						height: 92rpx;
						border: 2rpx solid #999999;
						border-radius: 46rpx;
						font-weight: 400;
						color: #999999;
					}

					.rightoff {
						width: 240rpx;
						height: 92rpx;
						background: #304156;
						border-radius: 46rpx;

						color: #FFFFFF;

					}
				}
			}
		}
	}
</style>
